<!--
 * @Author: wuchao66_Git 2803670835@qq.com
 * @Date: 2023-12-14 16:16:58
 * @LastEditors: wuchao66_Git 2803670835@qq.com
 * @LastEditTime: 2023-12-25 15:04:03
 * @FilePath: \t167vuexg\src\views\depart\depart.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 
-->
<template>
  <div>
    我是部门页面
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
import { findDeparts } from '../../api/department';
import * as echarts from 'echarts';
export default {
  //数据落差 改他的代码--同步，数据获取和盒子初始化一起走
  data() {
    return{
      option:{},//echarts数据
      //后台的数据
      //前台数据
    }
  },
  methods:{//同步没有数据落差
    //得到数据图标
    async getDepartData() {
    let res=  await findDeparts();
    this.option = {//既然第一次接不上，那就一起异步
        title: {
          text: "用户管理系统图标167-169",
        },
        tooltip: {},
        xAxis: {
          data: res.data.names,
        },
        yAxis: {},
        series: [
          {
            name: "各部门人数",
            type: "bar",
            data: res.data.counts,
          },{
            name: '销量',
            type: 'line',
            data: [5, 20, 36, 10, 20]
          }
        ],
      };
 // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    myChart.setOption(this.option);
    }
 
  },
  created() {
      this.getDepartData();
  },
}
</script>

<style>

</style>